<template>
	<view class="login-button-container">
		<view 
			class="login-button" 
			:class="[type, { 'disabled': disabled, 'loading': loading }]"
			@tap="handleLogin"
		>
			<view class="button-content">
				<view class="login-icon" v-if="!loading">
					<text class="icon-text">{{ iconText }}</text>
				</view>
				<view class="loading-icon" v-if="loading">
					<text class="loading-text">⏳</text>
				</view>
				<text class="login-text">{{ currentText }}</text>
			</view>
		</view>
		
		<!-- 微信手机号授权按钮 -->
		<button 
			v-if="type === 'wechat-phone'"
			class="wx-phone-button"
			open-type="getPhoneNumber"
			@getphonenumber="handleWechatPhone"
		>
			<view class="button-content">
				<view class="login-icon">
					<text class="icon-text">📱</text>
				</view>
				<text class="login-text">{{ text }}</text>
			</view>
		</button>
	</view>
</template>

<script>
export default {
	name: 'LoginButton',
	props: {
		text: {
			type: String,
			default: '登录'
		},
		type: {
			type: String,
			default: 'wechat',
			validator: function (value) {
				return ['wechat', 'phone', 'wechat-phone'].indexOf(value) !== -1
			}
		},
		disabled: {
			type: Boolean,
			default: false
		},
		loading: {
			type: Boolean,
			default: false
		},
		phoneNumber: {
			type: String,
			default: ''
		},
		verifyCode: {
			type: String,
			default: ''
		}
	},
	computed: {
		iconText() {
			switch (this.type) {
				case 'wechat':
					return '🟢'
				case 'phone':
					return '📱'
				case 'wechat-phone':
					return '📱'
				default:
					return '🔑'
			}
		},
		currentText() {
			if (this.loading) {
				return '登录中...'
			}
			return this.text
		}
	},
	methods: {
		handleLogin() {
			if (this.disabled || this.loading) return
			
			if (this.type === 'wechat') {
				this.$emit('wechat-login')
			} else if (this.type === 'phone') {
				if (!this.phoneNumber || !this.verifyCode) {
					uni.showToast({
						title: '请输入手机号和验证码',
						icon: 'none'
					})
					return
				}
				this.$emit('phone-login', {
					phoneNumber: this.phoneNumber,
					verifyCode: this.verifyCode
				})
			}
		},
		
		handleWechatPhone(e) {
			console.log('获取微信手机号:', e.detail)
			this.$emit('wechat-phone', e.detail)
		}
	}
}
</script>

<style lang="scss" scoped>
.login-button-container {
	position: relative;
}

.login-button {
	position: relative;
	overflow: hidden;
	border-radius: 24rpx;
	transition: all 0.3s ease;
	cursor: pointer;
	
	&:active:not(.disabled):not(.loading) {
		transform: scale(0.96);
	}
	
	&.disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
	
	&.loading {
		opacity: 0.8;
		cursor: not-allowed;
	}
	
	&.wechat {
		background: linear-gradient(135deg, #07C160 0%, #00D852 100%);
		box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
		
		&:hover:not(.disabled):not(.loading) {
			box-shadow: 0 12rpx 32rpx rgba(7, 193, 96, 0.4);
			transform: translateY(-2rpx);
		}
		
		.login-text {
			color: white;
		}
	}
	
	&.phone {
		background: linear-gradient(135deg, #6A82FB 0%, #FC5C7D 100%);
		box-shadow: 0 8rpx 24rpx rgba(106, 130, 251, 0.3);
		
		&:hover:not(.disabled):not(.loading) {
			box-shadow: 0 12rpx 32rpx rgba(106, 130, 251, 0.4);
			transform: translateY(-2rpx);
		}
		
		.login-text {
			color: white;
		}
	}
	
	&.wechat-phone {
		background: linear-gradient(135deg, #FFB800 0%, #FF8F00 100%);
		box-shadow: 0 8rpx 24rpx rgba(255, 184, 0, 0.3);
		
		&:hover:not(.disabled):not(.loading) {
			box-shadow: 0 12rpx 32rpx rgba(255, 184, 0, 0.4);
			transform: translateY(-2rpx);
		}
		
		.login-text {
			color: white;
		}
	}
}

.button-content {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24rpx 32rpx;
	position: relative;
	z-index: 1;
	
	.login-icon {
		margin-right: 16rpx;
		
		.icon-text {
			font-size: 32rpx;
		}
	}
	
	.loading-icon {
		margin-right: 16rpx;
		animation: rotate 1s linear infinite;
		
		.loading-text {
			font-size: 32rpx;
		}
	}
	
	.login-text {
		font-size: 32rpx;
		font-weight: 500;
		line-height: 1;
	}
}

.wx-phone-button {
	width: 100%;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 24rpx;
	background: linear-gradient(135deg, #FFB800 0%, #FF8F00 100%);
	box-shadow: 0 8rpx 24rpx rgba(255, 184, 0, 0.3);
	transition: all 0.3s ease;
	
	&::after {
		border: none;
	}
	
	&:active {
		transform: scale(0.96);
	}
	
	.button-content {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24rpx 32rpx;
		
		.login-icon {
			margin-right: 16rpx;
			
			.icon-text {
				font-size: 32rpx;
			}
		}
		
		.login-text {
			font-size: 32rpx;
			font-weight: 500;
			color: white;
		}
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
</style>